<template>
  <student_Home/>
    <div class="containerc">
        <div class="lectureContent">
            <h1 class="name">{{ lectureList.lectureName}}</h1><br>
            <p class="content">课程简介：{{ lectureList.lectureContent }}</p><br>
            <p class="time">上课时间：{{ lectureList.lectureTime }}</p><br>
            <p class="place">上课地点：{{ lectureList.lecturePlace }}</p>
        </div>
        <div class="link">
            <router-link :to="'/entryform/'+$route.params.id">
                <a class="btn">去报名</a>
            </router-link>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import student_Home from "./student_Home.vue"
export default{
  components: {
    'student_Home': student_Home
  },
    data(){
        return{
            lectureContent:"",
            lectureList:[
            {"id": 8,
                "createTime": "2023-12-05T01:27:22.277+00:00",
                "updateTime": "2023-12-05T01:27:22.277+00:00",
                "deleted": false,
                "lectureName": "java",
                "lectureContent": "G楼的第一堂课",
                "lectureTime": "2023-12-05",
                "lecturePlace": "G101",
                "teacherId": 1,
                "isNotificated": false,
                "trainningPlanId": 2}
            ],
        }
    },
    created(){
        let id = this.$route.params.id;
        this.loadData(id);
    },
    methods:{
        getLectureDataById(id){//从后台获取课程相关数据
            switch(id){
                case "1":this.lectureContent = "切图必备技能1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。今当远离，临表涕零，不知所言。";this.lectureName="计算机图形学";this.lecturePlace="m楼202";this.lectureTime="2021-12-06 11:30";this.teacherId=1;break;
                case "2":this.lectureContent = "切图必备技能2";break;
                case "3":this.lectureContent = "切图必备技能3";break;
                case "4":this.lectureContent = "切图必备技能4";break;
            }
            //return this.lectureList;
        },
        loadData(id){
        let that = this;
        //http://120.46.212.219:8081/lecture/detail?deleted=false&id=8
        axios.get('/api/lecture/detail',{
        params:{
          deleted:false,
          id:id,
        }
      })
      .then((response) =>{
        console.log(response);
        // this.lecturelist=response.data;
        console.log(response.data.data);
        that.lectureList=response.data.data;
        console.log(lectureList);

      })
      .catch(function(error){
        console.log(error);
      })
      .finally(function(){
        //总是会执行
      })
      }
    }
}
</script>

<style lang="css">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.containerc{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: url('../assets/image/5b5bb3f14863b.jpg');
    /* background-color: #000000; */
    background-size: cover;
}



.lectureContent{
    margin: 0px;
    padding: 20px;
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    background: rgba(255, 255, 255,0.5);
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);

}

.link{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: 0;
    width: 150px;
    height: 50px;
}

router-link :active{
  text-decoration: none;
}

.link a{
  text-decoration: none;
  /* width: 100px;
  height: 50px; */
  border: solid;
  transition: 0.5 linear;
  overflow: hidden;
  border-color: transparent;
  background-color: #bac34e;
  color: #fff;
  font-size: 30px;
  padding: 5px;
}

.link a:hover{
  border-color: transparent;
  background-color: #222222;
  color: #fff;
}



</style>